<template>
    <div>
        <div class="ali">
            <div>
                <span>支付宝</span>
            </div>
            <div class="aliInput">
                <span>姓名</span>
                <input
                    v-model="name"
                    type="text"
                    placeholder="请输入您的真实姓名"
                >
            </div>
            <div class="aliInput">
                <span>账号</span>
                <input
                    v-model="ali"
                    type="text"
                    placeholder="请输入您的真实支付宝账户"
                >
            </div>
        </div>
        <div class="wx">
            <div>
                <span>微信</span>
            </div>
            <div>
                <label for="upload_file">
                    <img :src="!imgurl? require('../../asset/icon/icon_up.png') :global.QINIU_URL + imgurl">
                    <input
                        @change="fileChange($event)"
                        type="file"
                        id="upload_file"
                        style="display:none"
                        multiple
                    />
                </label>
                <p>上传微信收款二维码</p>
            </div>
        </div>
        <div class="ali">
            <div>
                <span>银行卡</span>
            </div>
            <div class="aliInput">
                <span>姓名</span>
                <input
                    v-model="bankName"
                    type="text"
                    placeholder="请输入收款户名"
                >
            </div>
            <div class="aliInput">
                <span>卡号</span>
                <input
                    v-model="bankAccount"
                    type="text"
                    placeholder="请输入收款银行卡号"
                >
            </div>
            <div class="aliInput">
                <span>开户行</span>
                <input
                    v-model="bankBank"
                    type="text"
                    placeholder="请输入收款银行"
                >
            </div>
        </div>
        <div
            class="button"
            @click="pushData"
        >
            保存提现方式
        </div>
    </div>
</template>
<script>
export default {
    name: "addAccount",
    data() {
        return {
            QINIUtoken: '',
            name: '',
            ali: '',
            phone: '',
            imgurl: '',
            bankName: '',
            bankAccount: '',
            bankBank: '',
        };
    },
    methods: {
        getQiniuToken: function () {
            let params = {
                ossType: 'qiniu'
            };
            this.$post("/wz_api/common/getOssToken", params)
                .then((res) => {
                    if (res.code === 20000) {
                        this.QINIUtoken = res.data
                    }
                }).catch((res) => {
                })
        },
        pushData() {
            let params = {
                type: 'withdraw',
                ali_pay_name: this.name,
                ali_pay_account: this.ali,
                wx_pay_code: this.imgurl,
                bank_pay_name: this.bankName,
                bank_pay_account: this.bankAccount,
                bank_pay_bank: this.bankBank,
                member_id: localStorage.getItem('token'),
            };
            let _this = this
            this.$post("/wz_api/member/save", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.$dialog.toast({
                            mes: '保存成功',
                            timeout: 1500,
                            icon: 'success',
                            callback: () => {
                                _this.$router.back(-1);
                            }
                        });
                    }
                })
                .catch(err => { });

        },
        fileChange(el) {
            if (!el.target.files[0].size) return;//判断是否有文件数量
            this.fileList(el.target.files);//获取files文件组传入处理
            el.target.value = ''//清空val值，以便可以重复添加一张图片
        },
        fileList(files) {
            for (let i = 0; i < files.length; i++) {
                this.fileAdd(files[i]);
            }
        },
        bytesToSize(bytes) {
            if (bytes === 0) return '0 B';
            let k = 1000, // or 1024
                sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                i = Math.floor(Math.log(bytes) / Math.log(k));
            return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
        },

        fileAdd(file) {
            let _this = this
            this.size = this.size + file.size;//总大小
            let reader = new FileReader();
            reader.vue = this;
            reader.readAsDataURL(file);
            reader.onload = function () {
                file.src = this.result;
                _this.pushBase(file.src)

            }
        },
        pushBase(code) {

            if (!this.QINIUtoken) {
                this.$dialog.toast('七牛云token错误，请联系客服！')
                return code
            }
            let _this = this
            _this.$indicator.open({
                text: '正在上传图片...',
                spinnerType: 'fading-circle'
            });
            let pic = code
            let timestamp = new Date().getTime()
            let key = window.btoa(timestamp + '.png')
            pic = pic.replace(/^data:image\/(jpeg|png|gif);base64,/, '')
            let url = 'http://upload.qiniup.com/putb64/-1/key/' + key // 非华东空间需要根据注意事项 1 修改上传域名
            let xhr = new XMLHttpRequest()
            xhr.open('POST', url, true)
            xhr.setRequestHeader('Content-Type', 'application/octet-stream')
            xhr.setRequestHeader('Authorization', 'UpToken ' + this.QINIUtoken)
            xhr.send(pic)
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    let data = JSON.parse(xhr.responseText)
                    _this.imgurl = data.key
                    _this.$indicator.close();
                    _this.$toast({
                        message: '上传成功',
                        position: 'middle',
                        duration: 1000,
                    });
                } else {
                    _this.imgUrl = code;
                }
            }
        },

        // 方法
        infoData() {
            let params = {
                member_id: localStorage.getItem('token')
            };
            this.$post("/wz_api/member/detailByMain", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.name = res.data.ali_pay_name
                        this.ali = res.data.ali_pay_account
                        // this.phone = res.data.mobile
                        if (!!res.data.wx_pay_code) {
                            this.imgurl = res.data.wx_pay_code
                        }
                        this.bankName = res.data.bank_pay_name
                        this.bankAccount = res.data.bank_pay_account
                        this.bankBank = res.data.bank_pay_bank
                    }
                })
                .catch(err => { });
        }
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#e1deff");
    },
    created() {
        // 实例创建完成
        this.getQiniuToken();
        this.infoData();
    },
};
</script>
<style lang="less" scoped>
@import url("../../asset/css/addAccount");
</style>